<!-- 主体配置 -->
<template>
	<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-end">
		<el-button class="zs-btn-md zs-btn-primary" @click="openDrawer(false, 'add', {}, 'base')">新增</el-button>
	</div>
	<div class="zs-table-page-container">
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" :align="'center'" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="ruleName" label="规则名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="ruleTypeName" label="类型" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column label="定义" width="90" :align="'center'">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="openDrawer(false, 'edit', row, 'base')">编辑</el-button>
						<!-- <el-button class="zs-link" link size="small" @click="setRow(row)">编辑</el-button> -->
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" :align="'center'">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="goLedger(row)">设备台账</el-button>
						<el-button class="zs-link" link size="small" @click="goLog(row)">执行日志</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>

	<!-- 计划 -->
	<!-- <SetPlanDialog ref="plan" @queryList="queryList"></SetPlanDialog> -->

	<drawer-main-config :isShow="drawer.base.isShowDrawer" :isReadOnly="drawer.base.isReadOnly" :handleType="drawer.base.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'base')"> </drawer-main-config>
</template>

<script setup>
	// import SetPlanDialog from '@/components/drawerPlan.vue';
	import drawerMainConfig from './components/drawerMainConfig.vue';
	import { defaultTableData } from '@/utils/publicUtils';
	import Energy from '@/api/Energy';
	import { ref, reactive } from 'vue';
	import { useRouter } from 'vue-router';
	import { useStore } from 'vuex';

	const router = useRouter();
	const store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	let searchObj = reactive({ pageNumber: 1, pageSize: curPageSize.value });

	// 抽屉相关
	let currentRow = reactive({ data: {} });
	let drawer = reactive({
		base: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
	});

	const openDrawer = (flag, handleType, row, drawerType) => {
		drawer[drawerType].isReadOnly = flag;
		drawer[drawerType].isShowDrawer = true;
		drawer[drawerType].handleType = handleType;
		currentRow.data = row;
	};

	const closeDrawer = (data, drawerType) => {
		drawer[drawerType].isShowDrawer = data.isShow;
		data.isRefresh && queryList();
	};

	// //列表数据源
	const queryList = async () => {
		tableData.loading = true;
		let res = await Energy.mainConfigListApi(searchObj);
		if (res.data.code !== 200) return;
		tableData.data = res.data.data.list;
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			searchObj.pageSize = size;
		} else {
			searchObj.pageNumber = size;
		}
		queryList();
	};

	//设备台账
	const goLedger = row => {
		if (row.ruleType == 3) {
			router.push({ path: '/page/routeController/index', query: { rid: 'EnergyLedgerPropertyAreaEle', rTitle: '设备台账', id: row.id, projectName: row.projectCodeName } });
		} else {
			router.push({ path: '/page/routeController/index', query: { rid: 'page_property_query_energy_meter_list', rTitle: '设备台账', id: row.id, type: row.businessType } });
		}
	};

	//执行日志
	const goLog = row => {
		if (row.ruleType == 3) {
			router.push({ path: '/page/routeController/index', query: { rid: 'EnergyElePropertyAreaLog', rTitle: '执行日志', id: row.id, projectName: row.projectCodeName } });
		} else {
			router.push({ path: '/page/routeController/index', query: { rid: 'page_property_query_energy_meter_detail_list', rTitle: '执行日志', id: row.id, ruleName: row.ruleName } });
		}
	};

	//计划相关
	// const plan = ref();
	// const setRow = row => {
	// 	plan.value.setRow(row);
	// };

	queryList();
</script>
